import React, { useEffect, useState } from "react";
import request from "../../axios/api.jsx";
import { SearchBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import Search from "../../components/Search.jsx";
import { useSelector } from 'react-redux'
const Index = () => {
  const {name,avatar}=useSelector((state)=>state.listSlice)
  // let avatar = localStorage.getItem("avatar");
  // let username = localStorage.getItem("username");
  let navigate = useNavigate();
  const [list, setList] = useState([]);
  const [wd, setWd] = useState("");
  const getData = async () => {
    const res = await request.get("/api/list", {
      params: {
        wd,
      },
    })
    
    console.log(res.data);
    if (res.data.code == 200) {
      setList(res.data.data);
    }
  };
  useEffect(() => {
    getData();
  }, [wd]);
  const godetail = (id) => {
    navigate(`/detail/${id}`);
  };
  return (
    <div>
      
        <Search avatar={avatar} username={name}/>


      <SearchBar
        placeholder="请输入内容"
        value={wd}
        onChange={(value) => setWd(value)}
      />
      {list.length > 0 &&
        list.map((item, index) => (
          <div key={index} onClick={() => godetail(item.id)}>
            <img src={item.image}></img>
            <p>{item.title}</p>
            <p>￥{item.price}</p>
          </div>
        ))}
    </div>
  );
};

export default Index;
